@import '../../global.less';
.wrapper{
  display: flex;
  position: relative;
  .wrapper_left{
    background-color: white;
    flex: 1;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 320px;
    .title_wrapper{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        font-size: 24px;
        color: #333333;
      }
      .manage{
        color:@text-grey;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .head_info{
      display: flex;
      margin-top: 10px;
      align-items: center;
      .line{
        display: inline-block;
        margin-right: 10px;
        width: 1px;
        height: 10px;
        background: #B3C1D3;
      }
      .timer{
        color: @dark-grey;
        font-size: 12px;
      }
      .tag_wrapper{
        .tag{
          height: 25px;
          padding: 0 8px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          border-radius: 12.5px;
          margin-right: 15px;
          background: @light-white;
          border: 1px solid @light-white;
          color: #777;
          font-size: 12px;
        }
      }
    }
    .tool_wrapper{
      display: flex;
      padding-bottom: 16px;
      .tool_item{
        margin-right: 20px;
      }
    }
    .comment_wrapper{
      .comment{
        padding-top: 20px;
        padding-bottom: 15px;
        border-top: 1px solid @base-grey;
        display: flex;
        flex-direction: column;
        width: 100%;
        .title{
          height: 45px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .title_info{
            display: flex;
            .title_info_avatar{
              width: 44px;
              height:44px;
              margin-right: 10px;
            }
            .title_info_person{
              color:@base-blue;
              font-size: @font-size-caption;
              margin-bottom: 5px;
            }
            .title_info_createtime{
              color:@text-grey;
              font-size: @font-size-caption-sm;
            }
          }
          .manage{
            color:@text-grey;
            font-size: 12px;
            cursor: pointer;
            span{
              margin-right: 10px;
            }
            span:last-child{
              margin-right: 0px;
            }
          }
        }
        .detail{
          margin-left: 54px;
          margin-top: 10px;
          margin-bottom: 10px;
          .detail-html{
            word-break: break-all;
            font-size: @font-size-base;
            color:@text-base-black;
          }
        }
        .comment_tool_wrapper{
          display: flex;
          align-items: center;
          justify-content: space-between;
          color:@text-grey;
          font-size: @font-size-caption-sm;
          margin: 5px 0;
          .comment_tool_wrapper_left{
            display: flex;
            margin-left: 54px;
            cursor: pointer;
            div:first-child{
              margin-right: 10px;
            }
          }
          .comment_tool_wrapper_right{
            cursor: pointer;
          }
        }
        .reply_wrapper{
          margin-left: 87px;
          &>.reply{
            border-top: 1px solid @base-grey;
            padding-top: 10px;
            .reply_title{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .reply_title_info{
                display: flex;
                align-items: center;
                font-size: @font-size-caption-sm;
                .reply_person{
                  display: flex;
                  align-items: center;
                  color:@base-blue;
                  .reply_person_avatar{
                    width: 22px;
                    height:22px;
                    margin-right: 10px;
                  }
                  .reply_person_name{
                    font-size: 12px;
                  }
                }
                .divide{
                  margin: 0 8px;
                  color: @text-grey;
                }
                .replyed_person{
                  color:@base-blue;
                }
              }
              .replytime{
                color: @text-grey;
                font-size: @font-size-caption-sm;
              }
            }
            .reply_content{
              .reply_html{
                padding-top: 10px;
              }
            }
            .reply_tool_wrapper{
              display: flex;
              align-items: center;
              justify-content: space-between;
              color:@text-grey;
              font-size: @font-size-caption-sm;
              margin: 5px 0;
              .reply_tool_wrapper_left{
                display: flex;
                cursor: pointer;
                div:first-child{
                  margin-right: 10px;
                }
              }
              .reply_tool_wrapper_right{
                display: flex;
                cursor: pointer;
                .left_btn:first-child{
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
    .wrapper_left_body{
      margin: 10px 0;
    }
  }
  .wrapper_right{
    position: absolute;
    right: 0;
    background-color: @base-white;
    width: 300px;
  }
}
